// 导入创建路由的函数
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
// 1. 定义路由组件.
// 提前导入 直接挂载到对应路由
import Home from "../views/Home.vue";
import NotFound from "../views/NotFound.vue";

// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes: Array<RouteRecordRaw> = [
  // 提前导入组件的写法
  { path: "/", component: Home },
  // 访问对应路径的时候才导入组件的懒加载方式
  {
    path: "/doc",
    component: () => import("../views/Doc.vue"),
    children: [
      {
        path: "button",
        component: () => import("../views/ButtonDisplay.vue"),
      },
      {
        path: "card",
        component: () => import("../views/CardDisplay.vue"),
      },
      {
        path: "clock",
        component: () => import("../views/ClockDisplay.vue"),
      },
      {
        path: "input",
        component: () => import("../views/InputDisplay.vue"),
      },
      {
        path: "link",
        component: () => import("../views/LinkDisplay.vue"),
      },
      {
        path: "switch",
        component: () => import("../views/SwitchDisplay.vue"),
      },
      {
        path: "dialog",
        component: () => import("../views/DialogDisplay.vue"),
      },
      {
        path: "radio",
        component: () => import("../views/RadioDisplay.vue"),
      },
    ],
  },
  { path: "/404", component: NotFound },
  // 删除了 *（星标或通配符）路由#
  // 现在必须使用自定义的 regex 参数来定义所有路由(*、/*)：
  // 现在不能直接用*来匹配不存在的路由
  { path: "/:pathMatch(.*)*", redirect: "/404" }, // 不识别的path自动匹配404
];
// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: createWebHashHistory(),
  routes, // `routes: routes` 的缩写
});

export default router;
